<template>
    <sub-box v-loading="loading">
        <breadcrumb :title="'编辑资源'"></breadcrumb>
        <div class="white-block mt20">
            <div class="head-line">基本信息</div>
            <el-form class="form-common" :model="ruleForm" :rules="rules" ref="ruleForm"
                     size="small" label-width="120px" :label-position="'left'" v-if="detail">
                <el-form-item label="资源名称：" prop="name">
                    <el-input v-model="ruleForm.name" size="small"></el-input>
                </el-form-item>

                <el-form-item label="资源标识：">
                    <span>{{detail.resCode}}</span>
                </el-form-item>

                <el-form-item label="资源类型：">
                    <span>{{detail.resType==1?'服务接口类':(detail.resType==2?'服务页面类':'数据交换类')}}</span>
                </el-form-item>

                <el-form-item label="更新周期：">
                    <span>{{frequencyOptions | listFilter(detail.updateFrequency, 'value', 'label')}}</span>
                </el-form-item>

                <el-form-item label="归集状态：">
                    <span>{{detail.collectionSituation==1?'已归集':'未归集'}}</span>
                </el-form-item>

                <el-form-item label="资源状态：">
                    <span>{{detail.isRelease==1?'已发布':'未发布'}}</span>
                </el-form-item>

                <el-form-item label="共享方式：" prop="resPower">
                    <el-select v-model="ruleForm.resPower" placeholder="共享方式" class="full" size="small">
                        <el-option
                            v-for="item in shareTypeOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="审批部门：" v-if="ruleForm.resPower==2">
                    <div class="form-item-content">
                        <select-tree @loadNode="loadNode"
                                     :size="'small'"
                                     :loading.sync="provideDeptTree.loading"
                                     :renderTree.sync="provideDeptTree.renderTree"
                                     :lazy.sync="provideDeptTree.lazy"
                                     :clearable.sync="provideDeptTree.clearable"
                                     :filterable.sync="provideDeptTree.filterable"
                                     :model.sync="dept"
                                     :accordion.sync="provideDeptTree.accordion"
                                     :expandAll.sync="provideDeptTree.expandAll"
                                     :provideDeptTree="provideDeptTree"
                                     @filterMethod="dataFilter"
                                     :props="dataConsumersprops"
                                     :options="provideDeptTree.options"
                                     @nodeClick="treeNodeClick"
                                     class="full"></select-tree>
                    </div>

                </el-form-item>
                <el-form-item label="资源所属系统：">
                    <span>{{detail.ownApp || '共享平台'}}</span>
                </el-form-item>

                <el-form-item label="发布时间：">
                    <span>{{detail.releaseTime}}</span>
                </el-form-item>

                <el-form-item label="资源来源：" prop="resGetSource">
                    <el-input v-model="ruleForm.resGetSource" size="small"></el-input>
                </el-form-item>

                <el-form-item label="资源应用范围：" prop="resLevel">
                    <el-select v-model="ruleForm.resLevel" placeholder="应用范围" class="full" size="small">
                        <el-option
                            v-for="item in resLevelList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="提供部门：">
                    <select-tree @loadNode="loadNode"
                                 :size="'small'"
                                 :loading.sync="provideDeptTree.loading"
                                 :renderTree.sync="provideDeptTree.renderTree"
                                 :lazy.sync="provideDeptTree.lazy"
                                 :clearable.sync="provideDeptTree.clearable"
                                 :filterable.sync="provideDeptTree.filterable"
                                 :model.sync="ruleForm.SourceDept"
                                 :accordion.sync="provideDeptTree.accordion"
                                 :expandAll.sync="provideDeptTree.expandAll"
                                 :provideDeptTree="provideDeptTree"
                                 @filterMethod="dataFilter"
                                 :props="dataConsumersprops"
                                 :options="provideDeptTree.options"
                                 @nodeClick="treeNodeClick"
                                 class="full">
                    </select-tree>
                </el-form-item>
                <el-form-item v-if="ruleForm.resPower!=1">
                </el-form-item>
                <el-form-item label="资源说明：">
                    <el-input type="textarea" v-model="ruleForm.rdResourceDesc" :autosize="{ minRows: 4, maxRows: 4}"
                              size="small"></el-input>
                </el-form-item>
                <div class="mt20 text-center">
                    <el-button type="primary" size="small" class="vast" @click="save()">保存</el-button>
                </div>
            </el-form>
        </div>
        <transition name="slide">
            <router-view></router-view>
        </transition>
    </sub-box>
</template>

<script>
    import subBox from '../../components/layout/layout-sub'
    import breadcrumb from '../../components/breadcrumb'
    import selectTree from '../../components/select-tree'

    export default {
        data() {
            return {
                loading: false,
                ruleForm: {
                    name: '',
                    resLevel: '',
                    resPower: 1,
                    resGetSource: '',
                    remark: '',
                    rdResourceDesc: '',
                    SourceDept: {
                        value: '',
                        label: ''
                    }
                },
                dept: {
                    value: '',
                    label: ''
                },
                rules: {
                    name: [
                        {required: true, message: '请输入资源名称', trigger: 'blur'}
                    ]
                },
                shareTypeOptions: [
                    {
                        label: '公开',
                        value: 1
                    },
                    {
                        label: '受限',
                        value: 2
                    }
                ],
                resLevelList: [
                    {
                        label: '省级',
                        value: 1
                    },
                    {
                        label: '市级',
                        value: 2
                    },
                    {
                        label: '区级',
                        value: 3
                    }
                ],
                firstDeptList: null,
                frequencyOptions: [
                    {
                        label: '',
                        value: null
                    },
                    {
                        label: '实时',
                        value: 1
                    },
                    {
                        label: '每小时',
                        value: 2
                    },
                    {
                        label: '每天',
                        value: 3
                    },
                    {
                        label: '每月',
                        value: 4
                    },
                    {
                        label: '每季度',
                        value: 5
                    },
                    {
                        label: '每半年',
                        value: 6
                    },
                    {
                        label: '每年',
                        value: 7
                    },
                    {
                        label: '不更新',
                        value: 8
                    },
                    {
                        label: '不定时',
                        value: 9
                    }
                ],
                id: '',
                detail: null,
                dataConsumersprops: {
                    value: 'id', // ID字段名
                    label: 'label', // 显示名称
                    // children: 'haschildren', // 子级字段名
                    isLeaf: function (data, node) { // 是否为子节点
                        if (!data.expand) return true
                    }
                }, // 数据源部门
                provideDeptTree: { // 数据源部门树形下拉框参数
                    lazy: true,
                    clearable: false,
                    filterable: false,
                    accordion: false, // 一次只展开一个同级节点
                    expandAll: false, // 默认展开所有节点
                    loading: false, // 是否显示loading
                    renderTree: true, // 是否显示tree，隐藏后再次显示以此来重新渲染
                    options: []
                }
            }
        },
        watch: {
            detail(val) {
                if (val) {
                    this.ruleForm = {
                        name: val.resName,
                        resLevel: val.resLevel,
                        resPower: val.resPower,
                        resGetSource: val.resGetSource,
                        remark: '',
                        rdResourceDesc: val.rdResourceDesc,
                        SourceDept: {
                            value: val.resSourceDeptId,
                            label: val.resSourceDept
                        }
                    }
                    this.dept = {
                        value: val.resPowerDeptId,
                        label: val.resPowerDept
                    }
                }
            }
        },
        mounted() {
            this.id = this.$route.params.id
            if (this.id) this.getDetail()
        },
        methods: {
            getDetail() {
                this.$http.get('/admin/getResInfo', {
                    id: this.id
                }).then(result => {
                    if (result.success) {
                        this.detail = result.data
                    }
                })
            },
            // 获取树形结构数据-搜索
            dataFilter(event, callback) {
                if (this.selectTreeFilter) clearTimeout(this.selectTreeFilter)
                if (event || event !== '') {
                    this.selectTreeFilter = setTimeout(() => {
                        this.provideDeptTree.loading = true
                        this.provideDeptTree.lazy = false
                        this.$http.get('/admin/getDeptList', {
                            keyWord: event
                        }).then(result => {
                            if (result.success) {
                                this.provideDeptTree.loading = false
                                this.provideDeptTree.options = this.$method.treeProcess(result.data)
                            }
                            this.selectTreeFilter = null
                            if (callback) callback()
                        }).catch(() => {
                            this.provideDeptTree.loading = false
                            this.selectTreeFilter = null
                            if (callback) callback()
                        })
                    }, 300)
                } else {
                    this.selectTreeFilter = setTimeout(() => {
                        this.provideDeptTree.loading = true
                        this.provideDeptTree.lazy = true
                        if (callback) callback()
                    }, 300)
                }

            },
            loadNode(parentId, callback) {
                if (!parentId && this.firstDeptList) {
                    this.provideDeptTree.loading = false
                    if (callback) callback(this.firstDeptList)
                } else {
                    this.$http.get('/admin/getDeptList', {
                        deptId: parentId || ''
                    }).then(result => {
                        if (result.success) {
                            if (result.data[0]) {
                                result.data.forEach(item => {
                                    if (item.expand) {
                                        item.isLeaf = false
                                    } else {
                                        item.isLeaf = true
                                    }
                                    if (!item.label) {
                                        item.label = item.abbreviation || item.name
                                    }
                                })
                                if (!this.firstDeptList) this.firstDeptList = result.data
                            }
                            this.provideDeptTree.loading = false
                            if (callback) callback(result.data)
                        }
                    }).catch(() => {
                        this.provideDeptTree.loading = false
                    })
                }
            },
            treeNodeClick(node, callback) {
                if (callback) callback()
            },
            save() {
                this.validate('ruleForm', () => {
                    this.$http.post('/admin/updateResInfo', {
                        id: this.id,
                        collectionSituation: this.detail.collectionSituation,
                        resName: this.ruleForm.name,
                        resLevel: this.ruleForm.resLevel,
                        resPower: this.ruleForm.resPower,
                        rdResourceDesc: this.ruleForm.rdResourceDesc,
                        resSourceDept: this.ruleForm.SourceDept.label,
                        resSourceDeptId: this.ruleForm.SourceDept.value,
                        resGetSource: this.ruleForm.resGetSource,
                        resPowerDept: this.ruleForm.resPower === 1 ? '' : this.dept.label,
                        resPowerDeptId: this.ruleForm.resPower === 1 ? '' : this.dept.value
                    }).then(result => {
                        if (result.success) {
                            this.$message.success({
                                message: '保存成功',
                                showClose: true
                            })
                            this.$emit('upload')
                            this.$nextTick(() => {
                                this.$method.historyBack()
                            })
                        }
                    })
                })
            },
            validate(formName, callback) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if (callback) callback()
                    } else {
                        return false
                    }
                })
            }
        },
        components: {
            subBox,
            breadcrumb,
            selectTree
        }
    }
</script>

<style scoped lang="less">
    .form-common {
        min-width: 860px;
        max-width: 1200px;

        .el-form-item {
            width: 45%;
            display: inline-block;
            vertical-align: top;

            &:nth-child(2n) {
                margin-left: 8%;
            }
        }
    }
</style>
